<template>
  <div class="wrap">
    <div class="list">
      <div class="item">
        <div>
          <img src="@/assets/image/duihuan.png" alt="" />
          <p>余额</p>
        </div>
        <span>0</span>
      </div>
      <div class="item" @click="chongzhi">
        <div>
          <img src="@/assets/image/chongzhi.png" alt="" />
          <p>充值</p>
        </div>
        <img class="right" src="@/assets/image/right.png" alt="" />
      </div>
      <div class="item" @click="tixian">
        <div>
          <img src="@/assets/image/tixian.png" alt="" />

          <p>提现</p>
        </div>
        <img class="right" src="@/assets/image/right.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const chongzhi = () => {
    router.push('/recharge');
  };
  const tixian = () => {
    router.push('/withdrawal');
  };
</script>

<style lang="scss" scoped>
  .list {
  }
  .item {
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 0 30px;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
    }
    p {
      color: #fff;
      margin-left: 1rem;
    }
    span {
      color: #fff;
    }
    img {
      display: block;
      width: 40px;
    }
    .right {
      width: 1rem;
      height: 1rem;
      display: block;
    }
  }
</style>
